@import '~@/style/base.less';

@color_shop_bg: #3B3B3B;
@color_badge: #E95B4D;
@good_name_color: #242930;
@hair_color: #e4e4e4;

.shopping_wrap {
  position: fixed;
  left: 40px;
  right: 40px;
  bottom: 32px;
  z-index: 20;
  max-height: 96px;
  height: 96px;
  .frow(space-between, center);
  :global {
    animation: fadeInUp 400ms;
    animation-fill-mode: both;
  }
  .btn() {
    border: none;
    font-size: 36px;
    color: #fff;
    background: transparent;
    height: inherit;
  }
  .cart_total {
    .btn();
    flex:1;
    background: @color_shop_bg;
    border-radius: 47px 0 0 47px ;
    .frow(flex-start, center);
    padding-left: 33px;
    position: relative;
    .badge {
      position: absolute;
      top: -16px;
      left: 68px;
      height: 40px;
      border-radius: 50%;
      display: block;
      background: @color_badge;
      color: #fff;
      font-size: 24px;
      padding: 0 12px;
      line-height: 45px;
    }
    .cart_icon {
      background-image: url('~@/assets/images/shop_cart.png');
      display: block;
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 48px auto;
      font-size: 0;
      color: transparent;
      // transition: 0.5s;
      // transition-property: opacity;
      margin-right: 30px;
      :global {
        animation: zoomIn 400ms ease-out;
      }
    }
  }
  .choose_ok {
    .btn();
    width: 226px;
    text-align: center;
    background: @color_theme;
    border-radius: 0 47px 47px 0;
  }
}


.cartlist_wrap {
  position: fixed;
  left: 40px;
  right: 40px;
  bottom: 171px;
  z-index: 20;
  max-height: 50%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  .wrap() {
    .frow(space-between, center);
    padding: 19px 0;
  }
  .cart_top {
    .frow(space-between, center);
    position: relative;
    .hairline(bottom, @hair_color);
    padding: 34px 27px;
    div {
      font-size: 30px;
      &:nth-child(1) {
        color: #666;
      }
      &:nth-child(2) {
        color: #242930
      }
    }
  }
  .cart_item {
    .wrap();
    position: relative;
    padding: 19px 25px;
    &:not(:last-child) {
      .hairline(bottom, @hair_color);
    }
   
    .spec {
      + div {
        .frow(flex-start, center);
        .price {
          color: @color_price;
          font-size: 28px;
          margin-right: 30px;
          font-weight: 600;
        }
      }
      p{
        &:nth-child(1) {
          font-size: @color_text;
          color: @good_name_color;
        }
        &:nth-child(2) {
          color: @color_subtext;
          font-size: 24px;
          .elip();
          max-width: 300px;
        }
      }
    }
  }
  .list {
    max-height: 600px;
    overflow: scroll;
    padding-bottom: 50px;
  }
}